<template>
  <div class="login-container">
    <van-nav-bar title="分类" class="page-nav-bar"/>
   <!-- <van-grid :column-num="2" :gutter="10">
      <van-grid-item  v-for="(item,index) in fenlei" :key="item.id">
        <router-link to="/list" @click.native="indexid(item.id,index)">
          {{item.catename}}
          </router-link>
      </van-grid-item>
    </van-grid> -->
    <van-grid clickable :column-num="2" :gutter="20">
      <van-grid-item
        v-for="item in categoryList"
        :key="item.id"
        icon-prefix="fa"
        :icon="item.icon.replace('fa-', '')"
        :text="item.catename"
        :to="`/list/${item.id}`"
      />
    </van-grid>
  </div>
</template>

<script>
// import {getindex} from '../api/index'
import { mapState, mapActions } from "vuex";

export default {
//   data() {
//     return {
//      fenlei:[]
//     }
//   },
//   created(){
//   this.leib()
 
// },
//   methods:{
//      indexid(idx,index){
//      localStorage.setItem('by',idx)
//      localStorage.setItem('inx',index)
//      window.location.reload();
//     },
//   async leib(){
//     try {
//       let {data} =await getindex()
//       // console.log(data.data.allCate);
//       this.fenlei=data.data.allCate
//     } catch (error) {
//       console.log(error);
//     }
//   },
//   }
methods: {
    ...mapActions(["getCategoryList"]),
  },
  computed: {
    ...mapState(["categoryList"]),
  },
  created() {
    this.getCategoryList();
  },
};
</script>


<style lang="less" scope>
.van-grid-item__icon {
  font-size: 24px !important;
}
</style>